`<template>
	<view class="box">
		<!-- 标签栏 -->
		<view class="tabs fw-bt">
			<view class="tab" :class="active===index?'tabshow':''" v-for="(item,index) of list1" :key="index" @click="checkNav(index)">
				<view>{{item.name}}</view>
				<view class="tab-bg"></view>
			</view>
		</view>

		<!-- 空列表 -->
		<view class="none" v-if="!list.length">
			<view class="none-img f-w">
				<image src="https://jw.xzsw2021.com/static/order/icon_199@2x.png" mode=""></image>
			</view>
			<view class="none-name f34 bold">暂时没有任何订单</view>
			<view class="none-desc f26 c666">赶快去下单吧</view>
			<view class="none-btn" @click="goSpellGroup">拼团</view>
		</view>
		<!-- 订单列表 -->
		<view class="content" v-else>
			<view class="card" v-for="(item,index) of list" :key="index" @click="goDetail(item.group_buying_id)">
				<!-- 时间 -->
				<view class="time fw-bt f24">
					<view class="">{{item.groupBuying.create_time}}</view>
					<view class="red status hide-line">{{item.groupBuying.status=='0'?'待成团':item.groupBuying.status=='10'?'拼团成功':'拼团失败，钱已原路退回'}}</view>
				</view>
				<!-- 商品信息 -->
				<view class="msg flex" :class="item.djs?'':'mb12'">
					<view class="img">
						<image :src="item.groupBuying.productGroup.product.image" mode=""></image>
					</view>
					<view class="right">
						<view class="one fw-bt">
							<view class="one1 hide-line f28">{{item.groupBuying.productGroup.product.store_name}}</view>
							<view class="one2 f28 bold">￥{{item.groupBuying.productGroup.price}}</view>
						</view>
						<view class="two f24 c999 f-w">
							<view class="two1">￥{{item.groupBuying.productGroup.product.price}}</view>
							<!-- <view class="two2" v-if="false">邮费￥5.0</view> -->
						</view>
						<view class="three f24 c666">x1</view>
					</view>
				</view>
				<!-- 倒计时 -->
				<view class="djs fw-bt" v-if="item.groupBuying.status=='0'">
					<view class="djs1 f24 c666">拼团倒计时 <text class="bold red">{{item.h||0}}:{{item.m||0}}:{{item.s||0}}</text></view>
					<view class="btn" >邀请好友</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orign:'',//用于满汉全席任务
				active: 0, //
				list1: [{
					name: '全部',
				}, {
					name: '待成团',
				}, {
					name: '拼团成功'
				}, {
					name: '拼团失败'
				}], //标签
				list: [], //订单列表
			}
		},
		onLoad(options) {
			
		},
		onHide() {
			this.endInter()
		},
		onUnload: function() {
			this.endInter()
		},
		onShow() {
			this.getorderlist()
			// this.$countTime(this.list,'time1','djs')
		},
		methods: {
			endInter: function() {
			
				let list= this.list;
				list.forEach((v) => {
			
					clearInterval(v.timer);
			
				});
			
			},
			// 倒计时
			timeCountDown() {
				
				let list =this.list;
			
				list.forEach((v) => {
			        // console.log(v.endtime)
					// 开定时器时先关闭定时器
					if (v.timer) {
						clearInterval(v.timer);
					}
			        if(v.endtime>0){
						v.timer = setInterval(() => {
							
							
							v.endtime = v.endtime - 1000
							  		 
							if (v.endtime <= 0) {
								this.getorderlist()
								v.d = 0
								v.h = 0
								v.m = 0
								v.s = 0
								if (v.timer) {
									// 自动完成这里造成了死循环
									clearInterval(v.timer);
									
									// this.getgoodsinfo()
									// this.completeOrder(v.order_id, v);
								} // 刷新进行中
									
							} else {
						      
								this.$set(v, 'd', Math.floor(v.endtime / 1000 / 60 / 60 / 24))
								this.$set(v, 'h', Math.floor(v.endtime / 1000 / 60 / 60 % 24))
								this.$set(v, 'm', Math.floor(v.endtime / 1000 / 60 % 60))
								this.$set(v, 's', Math.floor(v.endtime / 1000 % 60))
							}
									
						}, 1000);
						
						
					}else{
						
						v.d = 0
						v.h = 0
						v.m = 0
						v.s = 0
						if (v.timer) {
							// 自动完成这里造成了死循环
							clearInterval(v.timer);
						} // 刷新进行中
					}
					 
					   
			
				});
			},
			
			// 获取订单列表
			getorderlist(){
				let status=this.active==0?'':this.active==1?'0':this.active==2?'10':'-1'
				let data={
					status
				}
				this.$request('store/product/groupOrderLst',data,'GET').then(res=>{
					this.list=res.data
					res.data.forEach(item => {		
						item.endtime = (item.groupBuying.end_time * 1000  - new Date()
							.getTime())	
					})
					this.timeCountDown()	
				})
				
			},
			
			
			// 切换nav
			checkNav(index) {
				this.active=index;
				this.getorderlist()
			},
			// 拼团
			goSpellGroup(){
				uni.navigateTo({
					url:'/pages/user/spellgroup/spellgroup'
				})
			},
			goDetail(e){			
				uni.navigateTo({
					url:"/pages/user/spellgroup/spellgroup-detail/spellgroup-detail?group_buying_id="+e
				})
			},
			// 邀请好友
			invitFriend(id){
				console.log('邀请好友');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.tabs{
			// height: 97rpx;
			width: 100%;
			height:100rpx ;
			box-sizing: border-box;
			padding: 24rpx 28rpx 15rpx;
			position: sticky;
				top: calc(var(--window-top) + 0rpx);
				background: #fff;
			.tab {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #999;
				font-size: 32rpx;
				text-align: center;
				.tab-bg{
					margin-top: 10rpx;
					width: 40rpx;
					height: 6rpx;
					background: #fff;
					border-radius: 3rpx;
				}
			}
			.tabshow{
				font-weight: bold;
				color: #333;
				// transition: .5s;
				.tab-bg{
					background: #109C7A;
				}
			}
		}
		.none {
			text-align: center;
			.none-img {
				margin: 95rpx auto 20rpx;
				width: 306rpx;
				height: 352rpx;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
			.none-desc {
				margin-top: 20rpx;
			}
			.none-btn {
				margin: 130rpx auto 0;
				width: 300rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
				border-radius: 10rpx;
			}
		}
		.content {
			min-height: calc(100vh - 97rpx);
			padding: 0 30rpx 80rpx;
			background-color: #F5F5F5;
			overflow: hidden;
			box-sizing: border-box;
			.card{
				margin: 20rpx auto;
				padding: 24rpx 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				.status{
					max-width: 400rpx;
				}
				
				.msg{
					margin: 30rpx 0 0;
					.img{
						flex-shrink: 0;
						width: 110rpx;
						height: 110rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.right{
						margin-left: 16rpx;
						flex: 1;
						overflow: hidden;
						.one{
							
							.one1{
								width: 400rpx;
							}
						}
						.two{
							margin: 4rpx 0 0;
							.two1{
								text-decoration: line-through;
							}
							.two2{
								margin-left: 25rpx;
							}
						}
					}
				}
				.mb12{
					margin-bottom: 12rpx;
				}
			}
			.btn{
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
				border-radius: 10rpx;
			}
		}
	}
</style>
